<template>
  <div class="">
    <!-- 签到页面 -->
    <header>
      <div class="top">
        <i @click="$router.go(-1)" class="iconfont icon-left"></i>
      </div>
      <div class="content">
        <p>您的积分可用</p>
        <li>{{ day }}</li>
      </div>
      <footer>
        <p>{{ obj.remark }}</p>
      </footer>
      <div class="signin">
        <button @click="signinBtn">签到</button>
      </div>

      <div class="cardBox">
        <div class="card">
          <img
            src=""
            alt=""
          />
          <div>
            <p>消费购物</p>
            <p>购物完成，确认收货后立返积分</p>
          </div>
          <div>
            <button @click="$router.push('/')">去购物</button>
          </div>
        </div>

        <div class="card bag">
          <img
            src=""
            alt=""
          />
          <div class="color">
            <p>消费购物</p>
            <p>购物完成，确认收货后立返积分</p>
          </div>
          <div>
            <button @click="$router.push('/roll')">去兑换</button>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
import { punch, integral } from "@/api/user.js";
import { notSignin } from "@/api";
import { ref } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    let day = ref(0);
    let obj = ref([]);
    var token = localStorage.getItem("token");

    // 这个是请求的积分总数
    integral().then((val) => {
      // val.forEach((element) => {
       console.log(val);
    });

    punch(token).then((res) => {
      obj.value = res.result[0];
      res.result.forEach((element) => {
        day.value += element.score;
      });
    });
    function signinBtn() {
      // 请勿重新签到
      notSignin(token).then((res) => {
        if (typeof res == "undefined") {
          Toast.fail("您今天已经签到过了");
        } else {
          // 这个是请求的连续签到几天
          punch(token).then((res) => {
            obj.value = res.result[0];
            console.log(res);
             day.value += res.result[0].score;
          });
        }
      });
    }

    return {
      signinBtn,
      ref,
      day,
      obj,
      notSignin,
    };
  },
};
</script>

<style lang="scss" scoped>
.bag {
  background-color: #ede6d4 !important;
}
.color {
  color: #b3a078 !important;
}
header {
  width: 100%;
  height: 580px;
  background-color: #fbf7ec;
}
.cardBox {
  width: 100%;
  padding: 0 30px;
  .card {
    width: 100%;
    background-color: #f4ebe2;
    height: 180px;
    border-radius: 10px;
    display: flex;
    position: relative;
    margin-bottom: 40px;
    div {
      font-size: 22px;
      &:nth-of-type(1) {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: #e1b68c;
      }
      &:nth-of-type(2) {
        position: absolute;
        right: 0;
        height: 100%;
        width: 170px;
        display: flex;
        align-items: center;
        justify-content: center;

        button {
          width: 110px;
          height: 50px;
          border: 0;
          outline: 0;
          background-color: #e1b68c;
          color: white;
          line-height: 40px;
          text-align: center;
          border-radius: 12px;
        }
      }
    }
    img {
      height: 100%;
      width: 200px;
    }
  }
}
.signin {
  width: 100%;
  height: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  button {
    width: 300px;
    height: 70px;
    border: 0;
    outline: none;
    border-radius: 26px;
    font-size: 29px;
    color: #fff;
    background-color: #b3a078;
  }
}
.top {
  width: 100%;
  height: 100px;
  left: 60px;
  padding: 0 20px;
  line-height: 100px;
  i {
    font-size: 50px;
  }
}
.content {
  width: 100%;
  height: 64%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  padding: 80px 0;
  p {
    font-size: 31px;
    color: #aeaeab;
  }
  li {
    font-size: 40px;
    font-weight: 700;
    color: #b3a078;
  }
}
footer {
  width: 100%;
  height: calc(100% - 64% - 100px);
  background-color: #e8e1cf;
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    font-size: 32px;
    color: #fff;
  }
}
</style>
